
<form class="layui-form layui-box" id="addform" style='padding:25px 30px 20px 0' action="/admin/menu/add" data-auto="true" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">用户账号</label>
        <div class="layui-input-block">
            <input name="title" value=''
                    required="required" title="菜单名称" placeholder="请输入菜单名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
          <input name="sort" value='0'
                  required="required" title="0" placeholder="请输入排序号" class="layui-input">
          <i class="fa fa-info-sign text-xs text-muted">用于后台显示的配置标题</i>        
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">连接</label>
        <div class="layui-input-block">
            <input name="url" value='#' required="required" title="url" placeholder="url" class="layui-input">
            <i class="fa fa-info-sign text-xs text-muted">如：index/index; 默认为 #</i>        
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-block">
          <select class="form-control m-b" name="pid" id="pid">
            <option value="0" selected="true">一级菜单</option>
            {% for menu in menus %}
            <option {% if pid == menu.id %}selected="true"{% endif %} value="{{menu.id}}">{{ menu.sql | safe}} {{menu.title}}</option>
            {% endfor %}
          </select>
          <i class="fa fa-info-sign text-xs text-muted">所属的上级菜单</i>    
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分组</label>
        <div class="layui-input-block">
          <select class="form-control m-b" name="group" id="group">
              {% for index, items in config.setup.MENU_GROUP %}
              <option value="{{index}}">{{items}}</option>
              {% endfor%}
          </select>
          <i class="fa fa-info-sign text-xs text-muted">用于左侧分组二级菜单</i>    
        </div>
    </div>
    <div class="layui-form-item">
            <label class="layui-form-label">是否隐藏</label>
            <div class="layui-input-block">
                <label class="think-radio">
                    <input checked type="radio" name="status" value="1" title="是" lay-ignore>
                    是
                </label>
                <label class="think-radio">
                    <input checked type="radio" name="status" value="0" title="否" lay-ignore>
                    否
                </label>
                <br>
                <i class="fa fa-info-sign text-xs text-muted">用于左侧分组二级菜单</i> 
            </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开发者可见 </label>
      <div class="layui-input-block">
        <label class="think-radio">
            <input checked type="radio" name="is_dev" value="1" title="是" lay-ignore>
            是
        </label>
        <label class="think-radio">
            <input checked type="radio" name="is_dev" value="0" title="否" lay-ignore>
            否
        </label>
        <br>
        <i class="fa fa-info-sign text-xs text-muted">仅开发者模式可见</i> 
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">说明</label>
      <div class="layui-input-block">
          <input id="tip" type="text" name="tip" class="layui-input input-sm form-control" placeholder="说明">
          <i class="fa fa-info-sign text-xs text-muted">菜单详细说明</i>        
      </div>
    </div>
    <div class="form-group">
        <label class="layui-form-label">图标</label>
        <div class="layui-input-block">
            <input id="icon" type="text" name="icon" class="layui-input input-sm form-control" placeholder="说明">
            <i class="fa fa-info-sign text-xs text-muted">菜单图标，只对一级菜单有效，请使用 <a href="http://fontawesome.io/" target="_blank">fontawesome.io</a> ,默认留空。</i>       
        </div>
    </div>
    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit' id="">添加菜单</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
    <div class="m-t-lg"></div>
</form>
<script>

  $(function () {
    
    window.form.render();
      $("#colse").click(function () {
          $("#bjax-target").removeClass("show");
      })


      $("#addbtn").on('click', function () {
          $('#addform').parsley().validate();
          if (true === $('#addform').parsley().isValid()) {
              _addFunAjax();
          }
          return false;
      })
      //获取上级菜单
      $.ajax({
          url: "/admin/menu/getmenu",
          success: function (msg) {
              /* 展示生成的HTML */
              $("#pid").html(category_to_html(msg));

          }
      })

      /**
       * 提交表单
       * @private
       */
      function _addFunAjax() {
          var title = $("#title").val();
          var sort = $("#sort").val();
          var url = $("#url").val();
          var pid = $("#pid").val();
          var group = $("#group").val();
          var hide=  $("input[name='hide']:checked").val();
          var is_dev=  $("input[name='is_dev']:checked").val();
          var tip = $("input[name='tip']").val();
          var ico = $("input[name='ico']").val();
          var jsonData = {
              "title": title,
              "sort": sort,
              "url": url,
              "pid":pid,
              "group":group,
              "hide":hide,
              "is_dev":is_dev,
              "tip":tip,
              "ico":ico
          };
          $.ajax({
              type: 'POST',
              url: '/admin/menu/add',
              data: jsonData,
              success: function (json) {
                  if (json) {

                      oTable.ajax.reload();
                      resetFrom();
                      toastr.success("添加成功！")
                  } else {
                      toastr.error("添加失败！")
                  }
              }
          });
      }


      /* 生成HTML ul/li 形式 */
      function category_to_html(nodes) {
          var html = [];
          var size = nodes.length;
          var left = null;
          html.push('<option value="0" selected="selected">一级菜单</option>');
          for (var i = 0; i < size; i++) {
              left = nodes[i];
                      html.push('<option value="' + left['id'] +  '">'+new Array(left["deep"]+1).join("= ") + left['title'] +  '</option>');
          }
          return html.join("\n");
      }

      /**
       * 重置表单
       */
      function resetFrom() {
          $('form').each(function (index) {
              $('form')[index].reset();
          });
      }
  })
</script>